<template>
  <div>
    <div class="giftarticle-container">
      <!-- 内容区 -->
      <div class="content">
        <div class="content-top">
          <van-image
            :src="giftlistX[cur_id].image"
            fit="contain"
            class="banner"
          >
          </van-image>
          <h1 class="tit">{{ giftlistX[cur_id].name }}</h1>
          <p class="sub_tit">{{ giftlistX[cur_id].description }}</p>
        </div>
        <div class="content-main">
          <h1 class="tit">
            1、白色恋人
          </h1>
          <p class="text">
            据说，原名“白恋人”的浪漫例外：“一个蛋糕厨师在冬天的时候做了一块甜美可口的饼干，有一天，蛋糕老师看到了一个对手。情侣们一起穿越原始的雪地，甜蜜的景色感动了蛋糕老师，从此，这种美味的饼干有了一个美丽的名字——白恋人。人们可以在白色恋人产品的包装上免费印上自己喜欢的图案，做成私人专属的定制款。另外，1997年（平成9年），作为白色恋人的姐妹产品，“白色巧克力饮料”也开始贩卖。
          </p>
          <van-image
            :src="require('@/assets/gift1.png')"
            fit="cover"
          ></van-image>
          <p class="text">
            在札幌市西区，石屋制果设有一处由厂房改装建成的旅游景点，内有公园、博物馆及工厂，介绍“白之恋人”的历史及制造方法，亦珍藏了各国的历史茶具及关于巧克力的海报。
          </p>
        </div>
        <div class="bottom-message">
          <span class="cur_price">￥62.0</span>
          <span class="ori_price">￥88.0</span>
          <van-button
            class="more-Btn"
            type="info"
            @click="$router.push('/search/giftdetail')"
            >更多</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  // 定义属性
  data() {
    return {
      cur_id: this.$route.params.giftId - 1
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState(['giftlistX'])
    // 根据路由传来的id判断具体礼物列表
    // patchgoodslist() {
    //   const item1 = this.giftlistX.find(item => {
    //     return item.id === this.$route.params.giftId
    //   })
    //   return item1
    // }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    ...mapActions(['getSearchGift'])
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getSearchGift() // 1.请求store中actions中的ajax获取礼物列表
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.cur_id)
  }
}
</script>

<style lang="less">
.giftarticle-container {
  height: 86vh;
  overflow-y: auto;
  // 内容区域
  .content {
    padding: 0 58px 0 64px;
    // 头部
    .content-top {
      .banner {
        width: 634px;
        height: 296px;
      }
      text-align: left;
      .tit {
        font-size: 36px;
        color: #484747;
      }
      .sub_tit {
        font-family: PingFangSC-Regular;
        font-size: 22px;
        color: #b4b4b4;
      }
    }
    // 主要
    .content-main {
      text-align: left;
      .tit {
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #484747;
      }
      .text {
        font-family: PingFangSC-Regular;
        font-size: 22px;
        color: #737373;
      }
    }
    // 底部信息
    .bottom-message {
      margin-bottom: 26px;
      display: flex;
      .cur_price {
        font-family: PingFang-SC-Heavy;
        font-size: 22px;
        color: #4da1dd;
      }
      .ori_price {
        margin: 0 391px 0 19px;
        font-family: PingFang-SC-Heavy;
        font-size: 22px;
        text-decoration: line-through;
        color: #c2c4c5;
      }
      .more-Btn {
        padding: unset;
        width: 92px;
        height: 32px;
        background-color: #4a90e2;
        font-family: PingFangSC-Regular;
        font-size: 18px;
        line-height: 32px;
        color: #fefefe;
      }
    }
  }
}
</style>
